<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="utf-8" />
<title>黑色Html5响应式个人博客模板――主题《如影随形》</title>
<meta name="keywords" content="个人博客模板,博客模板,响应式" />
<meta name="description" content="如影随形主题的个人博客模板，神秘、俏皮。" />
<link href="../static/h5css/base.css" rel="stylesheet"
	th:href="@{/h5css/base.css}" />
<link href="../static/h5css/style.css" rel="stylesheet"
	th:href="@{/h5css/style.css}" />
<link href="css/media.css" rel="stylesheet"
	th:href="@{/h5css/media.css}" />
<meta name="viewport"
	content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
</head>
<body>
	<div class="ibody">
		<header>
			<h1>木秀猿林</h1>
			<h2>影子是一个会撒谎的精灵，它在虚空中流浪和等待被发现之间;在存在与不存在之间....</h2>
			<div class="logo">
				<a href="/"></a>
			</div>
			<nav id="topnav">
				<a href="/">首页</a> <a href="/allworks">作品展示</a> <a href="/career">职业生涯</a>
				<a href="/articlelist">所有文章</a> <a href="/about">关于我</a>
			</nav>
		</header>
		<article>
			<h2 class="about_h">
				您现在的位置是：<a href="/">首页</a>><a href="###">文章列表</a>
			</h2>
			<div class="bloglist">				
			</div>
			<div class="page">				
			</div>
		</article>
		<aside>
			<div class="rnav">
			</div>
			<div class="ph_news">
				<h2>
					<p>点击排行</p>
				</h2>
				<ul class="ph_n">
				</ul>
				<h2>
					<p>栏目推荐</p>
				</h2>
				<ul>
					<li><a href="/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li>
					<li><a href="/">励志人生-要做一个潇洒的女人</a></li>
					<li><a href="/">女孩都有浪漫的小情怀――浪漫的求婚词</a></li>
					<li><a href="/">Green绿色小清新的夏天-个人博客模板</a></li>
					<li><a href="/">女生清新个人博客网站模板</a></li>
					<li><a href="/">Wedding-婚礼主题、情人节网站模板</a></li>
					<li><a href="/">Column 三栏布局 个人网站模板</a></li>
					<li><a href="/">时间煮雨-个人网站模板</a></li>
					<li><a href="/">花气袭人是酒香―个人网站模板</a></li>
				</ul>
				<!-- <h2>
					<p>最新评论</p>
				</h2>
				<ul class="pl_n">
					<dl>
						<dt>
							<img src="images/s8.jpg" th:src="@{/h5images/s8.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							DanceSmile
							<time>49分钟前</time>
						</dd>
						<dd>
							<a href="/">文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</a>
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="images/s7.jpg" th:src="@{/h5images/s7.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							yisa
							<time>2小时前</time>
						</dd>
						<dd>
							<a href="/">我手机里面也有这样一个号码存在</a>
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="images/s6.jpg" th:src="@{/h5images/s6.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							小林博客
							<time>8月7日</time>
						</dd>
						<dd>
							<a href="/">博客色彩丰富，很是好看</a>
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="images/003.jpg" th:src="@{/h5images/003.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							DanceSmile
							<time>49分钟前</time>
						</dd>
						<dd>
							<a href="/">文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</a>
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="images/002.jpg" th:src="@{/h5images/002.jpg}" />
						</dt>
						<dt></dt>
						<dd>
							yisa
							<time>2小时前</time>
						</dd>
						<dd>
							<a href="/">我手机里面也有这样一个号码存在</a>
						</dd>
					</dl>
				</ul>
				<h2>
					<p>最近访客</p>
					<ul>
						<img src="images/vis.jpg" th:src="@{/h5images/vis.jpg}" />
					</ul>
				</h2> -->
			</div>
			<div class="copyright">
				<ul>
					<p>
						Design by <a href="/">DanceSmile</a>
					</p>
					<p>蜀ICP备11002373号-1</p>
				</ul>
			</div>
		</aside>
		<script src="../static/h5js/silder.js" th:src="@{/h5js/silder.js}"></script>
		<script src="../../static/jquery/2.1.4/jquery-2.1.4.min.js"
			th:src="@{/js/jquery.min.js}"></script>
		<script type="text/javascript" th:inline="javascript">
			/*<![CDATA[*/
			       	function loadData(page){
						$.get("/getarticlepage/"+page,function(result){
							if(result != null){
								$(".bloglist").empty();
								$.each(result.content,function(key,value){
									$(".bloglist").append("<div class='newblog'><ul><h3><a href='/newdetail/"+value.id+"'>"+value.articleName+"</a></h3><div class='autor'><span>作者："+value.user.nickName+"</span><span>分类：[<a href='/'>"+value.articleType.typeName+"</a>]	</span><span>浏览（<a href='/'>"+value.readnum+"</a>）</span><span>评论（<a href='/'>30</a>）</span></div><p>"+value.articleAbstract+"<a href='/newdetail/"+value.id+"' target='_blank' class='readmore'>全文</a></p></ul><figure><img src='/getfilebyname/?filename="+value.articleIcon+"' />	</figure><div class='dateview'>"+value.regTime+"</div></div>");
								});
								$(".page").empty();
								var html = "";
								//当前的页是首页
								if(result.first && !result.last){
									html += "<b>"+(result.number+1)+"</b>";
									for(var i=2;i<=result.totalPages;i++){
										html += "<a href='javascript:loadData("+i+")'>"+i+"</a>";
									}
									html += "<a href='javascript:loadData("+(result.number+2)+")'>&gt;</a><a href='javascript:loadData("+(result.totalPages)+")')\">&gt;&gt;</a>";							
								//当前页不是尾页
								}else if(!result.first && result.last){
									html += "<a href='javascript:loadData(1)'>&lt&lt;</a><a href='javascript:loadData("+(result.number)+")'>&lt;</a>";
									var i=(result.totalPages-2)>0?(result.totalPages-2):(result.totalPages-1);
									for(;i<=result.totalPages-1;i++){
										html += "<a href='javascript:loadData("+i+");'>"+i+"</a>";
									}
									html += "<b>"+(result.totalPages)+"</b>";
								//当前页既不是首页也不是尾页
								}else if(result.first && result.last){
									html += "<b>"+(result.totalPages)+"</b>";
								}else{
									html += "<a href='javascript:loadData(1)'>&lt&lt;</a><a href='javascript:loadData("+(result.number)+")'>&lt;</a>";
									for(var i=result.number;i<=result.number+2;i++){
										if(i == result.number+1){
											html += "<b>"+i+"</b>";
										}else{
											html += "<a href='javascript:loadData("+i+");'>"+i+"</a>";
										}
									}
									html += "<a href='javascript:loadData("+(result.number+2)+")'>&gt;</a><a href='javascript:loadData("+(result.totalPages)+")')\">&gt;&gt;</a>";
								}
								$(".page").html(html);
							}
						});
					}
			       	function getclickarticle(){
						$.get("/getclickarticle",function(result){
							if(result != null){
								var html = "";
								$.each(result,function(key,value){
									if(key == 0 || key == 1 || key ==2){
										html += "<li><span class='num"+(key+1)+"'>"+(key+1)+"</span><a href='/newdetail/"+value.id+"'>"+value.articleName+"</a></li>";
									}else{
										html += "<li><span>"+(key+1)+"</span><a href='/newdetail/"+value.id+"'>"+value.articleName+"</a></li>";
									}
									$(".ph_n").html(html);
								});
							}
						});
					}
				$(document).ready(function(){
					loadData(1);
					//获取所有文章类型
					$.get("/getarticletype",function(result){
						if(result != null){
							var html = "";
							$.each(result,function(key,item){
								html += "<li class='rnav"+((key%4)+1)+"'><a href='/alltypearticle/"+item.id+"'>"+item.typeName+"</a></li>";							
							});
							$(".rnav").html(html);
						}
					});
					getclickarticle();
				});
			/*]]>*/
			</script>
		<div class="clear"></div>
		<!-- 清除浮动 -->
	</div>
</body>
</html>
